<!-- 页面底部弹出页面 -->
<template lang="pug">
div(:style="{zIndex: rootZIndex}")
  //- transition(name="fade")
    div.scrim(v-show="isVisible" @click="$emit('close')")
  div.scrim(v-show="isVisible" @click="$emit('close')")
  transition(
      name="slide-v"
      @before-enter="beforeEnter"
      @after-leave="afterLeave"
      )
      div.content(v-show="isVisible")
        slot
</template>

<script>
/*
  事件
    close     关闭弹出页面
*/

export default {
  name: "BottomSheet",
  props: {
    // 动态地判断是否显示这个组件
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rootZIndex: -1,
    }
  },

  methods: {
    beforeEnter() {
      this.rootZIndex = 3
    },
    afterLeave() {
      this.rootZIndex = -1
    },
  },
}
</script>

<style lang="stylus" scoped>

transition-time=400ms

.c-root
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0

.content
  position: absolute
  left: 0
  right: 0
  bottom: 0
  background: white
  overflow-no-scrollbar()

.scrim
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0
  background: rgba(black, 0.3)

// slide
.slide-v-enter
.slide-v-leave-to
  transform(translateY(100%))

.slide-v-enter-active
.slide-v-leave-active
  transition: transform transition-time

.slide-v-enter-to
.slide-v-leave
  transform(translateY(0%))

// fade
.fade-leave
.fade-enter-to
  opacity: 1

.fade-enter-active
.fade-leave-active
  transition: opacity transition-time

.fade-enter
.fade-leave-to
  opacity: 0

</style>
